<template>
  <div class="security-settings">
    <h3>安全设置</h3>
    
    <el-form :model="securityForm" label-width="220px" class="settings-form">
      <h4>密码安全</h4>
      
      <el-form-item label="最小密码长度">
        <el-input-number v-model="securityForm.minPasswordLength" :min="6" :max="20"></el-input-number>
      </el-form-item>
      
      <el-form-item label="密码复杂度要求">
        <el-checkbox-group v-model="securityForm.passwordComplexity">
          <el-checkbox label="uppercase">包含大写字母</el-checkbox>
          <el-checkbox label="lowercase">包含小写字母</el-checkbox>
          <el-checkbox label="numbers">包含数字</el-checkbox>
          <el-checkbox label="symbols">包含特殊字符</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item label="密码过期时间(天)">
        <el-input-number v-model="securityForm.passwordExpiryDays" :min="0" :max="365"></el-input-number>
        <div class="form-tip">设置为0表示密码永不过期</div>
      </el-form-item>
      
      <h4>登录安全</h4>
      
      <el-form-item label="登录失败锁定">
        <el-switch v-model="securityForm.enableLoginLock"></el-switch>
      </el-form-item>
      
      <el-form-item v-if="securityForm.enableLoginLock" label="失败尝试次数">
        <el-input-number v-model="securityForm.maxLoginAttempts" :min="3" :max="10"></el-input-number>
      </el-form-item>
      
      <el-form-item v-if="securityForm.enableLoginLock" label="锁定时间(分钟)">
        <el-input-number v-model="securityForm.lockDurationMinutes" :min="5" :max="60"></el-input-number>
      </el-form-item>
      
      <el-form-item label="会话超时时间(分钟)">
        <el-input-number v-model="securityForm.sessionTimeoutMinutes" :min="5" :max="1440"></el-input-number>
      </el-form-item>
      
      <el-form-item label="记住登录状态(天)">
        <el-input-number v-model="securityForm.rememberMeDays" :min="1" :max="30"></el-input-number>
      </el-form-item>
      
      <h4>其他安全设置</h4>
      
      <el-form-item label="启用IP限制">
        <el-switch v-model="securityForm.enableIpRestriction"></el-switch>
      </el-form-item>
      
      <el-form-item v-if="securityForm.enableIpRestriction" label="允许的IP地址/范围">
        <el-input 
          v-model="securityForm.allowedIps" 
          type="textarea" 
          rows="3" 
          placeholder="每行一个IP地址或CIDR范围，例如: 192.168.1.1 或 192.168.1.0/24"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="启用CORS">
        <el-switch v-model="securityForm.enableCors"></el-switch>
      </el-form-item>
      
      <el-form-item v-if="securityForm.enableCors" label="允许的来源域名">
        <el-input 
          v-model="securityForm.allowedOrigins" 
          type="textarea" 
          rows="3" 
          placeholder="每行一个域名，例如: https://example.com"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="启用CSRF保护">
        <el-switch v-model="securityForm.enableCsrf"></el-switch>
      </el-form-item>
      
      <el-form-item label="启用内容安全策略(CSP)">
        <el-switch v-model="securityForm.enableCsp"></el-switch>
      </el-form-item>
      
      <h4>API安全</h4>
      
      <el-form-item label="启用API访问限制">
        <el-switch v-model="securityForm.enableApiRateLimit"></el-switch>
      </el-form-item>
      
      <el-form-item v-if="securityForm.enableApiRateLimit" label="API请求限制(次/分钟)">
        <el-input-number v-model="securityForm.apiRateLimit" :min="10" :max="1000"></el-input-number>
      </el-form-item>
      
      <el-form-item label="API Token有效期(天)">
        <el-input-number v-model="securityForm.apiTokenExpiryDays" :min="1" :max="365"></el-input-number>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="saveSettings" :loading="saving">保存设置</el-button>
        <el-button @click="resetSettings">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const saving = ref(false)

// 安全设置表单
const securityForm = reactive({
  // 密码安全
  minPasswordLength: 8,
  passwordComplexity: ['uppercase', 'numbers'],
  passwordExpiryDays: 90,
  
  // 登录安全
  enableLoginLock: true,
  maxLoginAttempts: 5,
  lockDurationMinutes: 15,
  sessionTimeoutMinutes: 30,
  rememberMeDays: 7,
  
  // 其他安全设置
  enableIpRestriction: false,
  allowedIps: '',
  enableCors: true,
  allowedOrigins: 'https://example.com\nhttps://api.example.com',
  enableCsrf: true,
  enableCsp: true,
  
  // API安全
  enableApiRateLimit: true,
  apiRateLimit: 100,
  apiTokenExpiryDays: 30
})

// 初始设置
const initialSettings = { ...securityForm }

// 初始化
onMounted(async () => {
  await fetchSettings()
})

// 获取安全设置
async function fetchSettings() {
  try {
    // 这里替换为实际的API调用
    // const response = await axios.get('/api/admin/settings/security')
    // Object.assign(securityForm, response.data)
    
    // 模拟加载设置
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 保存初始设置（用于重置功能）
    Object.assign(initialSettings, JSON.parse(JSON.stringify(securityForm)))
  } catch (error) {
    console.error('Failed to fetch security settings:', error)
    ElMessage.error('加载安全设置失败')
  }
}

// 保存设置
async function saveSettings() {
  saving.value = true
  try {
    // 这里替换为实际的API调用
    // await axios.put('/api/admin/settings/security', securityForm)
    
    // 模拟保存
    await new Promise(resolve => setTimeout(resolve, 800))
    
    ElMessage.success('安全设置保存成功')
    
    // 更新初始设置
    Object.assign(initialSettings, JSON.parse(JSON.stringify(securityForm)))
  } catch (error) {
    console.error('Failed to save security settings:', error)
    ElMessage.error('保存安全设置失败')
  } finally {
    saving.value = false
  }
}

// 重置设置
function resetSettings() {
  Object.assign(securityForm, JSON.parse(JSON.stringify(initialSettings)))
  ElMessage.info('已重置为上次保存的设置')
}
</script>

<style scoped>
.security-settings {
  padding: 10px;
}

h3, h4 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

h4 {
  margin-top: 30px;
  color: #606266;
}

.settings-form {
  max-width: 800px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  margin-top: 5px;
}
</style> 